<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
    <!--    时间修饰符是用来和事件联用,用来阻止或者影响事件的触发条件
    .stop 阻止事件冒泡
    .prevent 阻止标签的默认行为
    .self  只触发自身行为
    .once 一次事件
    -->
    <!--    .stop是用来阻止事件冒泡-->
    {{msg}}
    <div style="width: 200px;height: 200px;background: red" @click="parent">
        <!--对孩子中单击事件就行修饰: 不进行事件冒泡处理 .stop -->
        <div style="width: 100px;height: 100px;background: green" @click.stop="child">
        </div>
    </div>
    <h2>prevent时间修饰符</h2>
    <!--    默认行为 根据href直接去跳转-->
    <a href="http://www.baidu.com" @click.prevent="search">百度一下</a>
    <!--    self行为-->
    <div style="width: 200px;height: 200px;background: aqua" @click.self="parent">
        <!--对孩子中单击事件就行修饰: 不进行事件冒泡处理 .stop -->
        <div style="width: 100px;height: 100px;background: green" @click="child">

        </div>
        <div style="width: 100px;height: 100px;background: brown" @click="child">
        </div>
    </div>

    <h2>once时间修饰符</h2>
<!--    标签上对应的事件只能执行一次-->
    <input type="button" value="点我" @click.once="clickMe">
</div>

<script>
    var app = new Vue({
        el: "#app",   //element:元素
        data: {        //data:数据 用来vue实例对象绑定一系列数据
            msg: "事件修饰符",
        },
        methods: {
            parent() {
                alert("parent div event")
            },
            child() {
                alert("child div event")
            },
            search() {
                alert("a click event")
            },
            clickMe(){
                alert("呵呵")
            }
        },
        computed: {}
    });
</script>
</body>
</html>